<!-- Add "fixed" class to make the sidebar fixed always to the browser viewport. -->
<!-- Adding class "toggle-others" will keep only one menu item open at a time. -->
<!-- Adding class "collapsed" collapse sidebar root elements and show only icons. -->
<div class="sidebar-menu toggle-others fixed">

  <div class="sidebar-menu-inner">

    <% if (route.length) { %>
    <ul id="main-menu" class="main-menu">
      <% route.forEach(function(name, i){ %>
      <% if (name.active && name.children && name.children.length > 0) { %>
      <% name.children.forEach(function(name){ %>
      <li class="<%= (name.children && name.children.length > 0) ? 'has-sub' : '' %> <%= name.active ? 'opened active expanded' : '' %>">
        <a href="<%= name.url %>">
          <!-- <i class="<%= name.icon %>"></i> -->
          <span class="title"><%= name.title %></span>
        </a>
        <% if (name.children && name.children.length > 0) { %>
        <ul>
          <% name.children.forEach(function(name){ %>
          <li class="<%= name.active ? 'opened active' : '' %>">
            <% if (name.url) { %>
            <a href="<%= name.url %>">
              <span class="title"><%= name.title %></span>
            </a>
            <% } else { %>
            <a disabled="true" class="sidebar-menu-disabled">
              <span class="title"><%= name.title %></span>
            </a>
            <% } %>
          </li>
          <% }) %>
        </ul>
        <% } %>
      </li>
      <% }) %>
      <% } %>
      <% }) %>
    </ul>
    <% } %>
  </div>

</div>
<style>
  #main-menu .sidebar-menu-disabled {
    color: #000;
  }
</style>
